<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container {
      height: 45vh;
      width: 45vh;
    }

    #box {
      height: 45vh;
      width: 45vh;
    }
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=LTcdtaUhvwYYnvWd90tfvhBYBGgxmwbC"></script>
</head>

<body>
  <div id="container"></div>
  <div id="box"></div>
  <script>
    // 百度地图参考代码
    const map = new BMap.Map("container");        // 创建地图实例  
    const point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别  
    map.enableScrollWheelZoom(true);              // 开启鼠标滚轮缩放


    // 自己写的第二个地图，和第一个地图完全独立。

    // 创建新的地图实例
    const m2 = new BMap.Map("box");
    // 创建新的地图坐标点
    const p2 = new BMap.Point(113.23, 23.16);
    m2.centerAndZoom(p2, 15);


    // BMap.Map()      --  构造函数 - 创建全新地图实例
    // BMap.Point()    --  构造函数 - 创建全新坐标点实例


  </script>
</body>

</html>